<template>
 <div id="air"> <!--为echarts准备一个具备大小的容器dom-->
 <div id="t-tile">温度监控</div>
  <div class="box">
      <div id="ii"  class="column" style="width: 170px;height: 170px;"></div>
      <div id="zz" class="column" style="width: 170px;height: 170px;"></div>
  </div>
  </div>
</template>
<script>
  import * as echarts from 'echarts';
    export default {
        name: '',
        data () {
            return {
                charts: ''
            }
        },
        methods:{
            drawPie(id,dvalue,title){
                this.charts = echarts.init(document.getElementById(id))
               this.charts.setOption({
                title: {
                text: title,
                left: 'center',
                padding: 1, 
                textStyle: {
                    color: '#FFF',
                    fontSize: 12,
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                }
                },
                  series: [{
            type: 'gauge',
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: -15,
            max: 45,
            splitNumber: 12,
            itemStyle: {
                color: '#FFAB91'
            },
            progress: {
                show: true,
                width: 20
            },

            pointer: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    width: 20
                }
            },
            axisTick: {
                distance: -30,
                splitNumber: 5,
                lineStyle: {
                    width: 2,
                    color: '#999'
                }
            },
            splitLine: {
                distance: -35,
                length: 5,
                lineStyle: {
                    width: 3,
                    color: '#999'
                }
            },
            axisLabel: {
                distance: 5,
                color: '#fff',
                fontSize: 10
            },
            anchor: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                valueAnimation: true,
                width: '60%',
                lineHeight: 40,
                height: '15%',
                borderRadius: 8,
                offsetCenter: [0, '-15%'],
                fontSize: 15,
                fontWeight: 'bolder',
                formatter: '{value} °C',
                color: 'auto'
            },
            data: [{
                value: dvalue
            }]
        },

        {
            type: 'gauge',
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: -15,
            max: 45,
            itemStyle: {
                color: '#FD7347',
            },
            progress: {
                show: true,
                width: 8
            },

            pointer: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            detail: {
                show: false
            },
            data: [{
                value: dvalue,
            }]

        }
    ],
               })
            }
        },
      //调用
        mounted(){
            this.$nextTick(function() {
                this.drawPie('ii',23,'土壤温度')
                this.drawPie('zz',27,'空气湿度')
            })
        }
    }
</script>

<style lang="scss" scoped>

#t-tile{
    height: 10vh;
    line-height: 10vh;
    text-align: center;
    color:white;
}
.box{
  display: flex;
  margin: 0 auto;
}

.column{
  flex: 3;
}
</style>
